
function addVisualPanels() {
    if(displayPanel.getActiveTab())
        displayPanel.getActiveTab().cleanUp()
    displayPanel.removeAll()
    for (i in visualPanels) {
        var newPanel = new visualPanels[i].visual()
        // console.log('a')
        displayPanel.add(newPanel)
        newPanel.on('activate',
            function() {
                changeMode()
        });
        
        newPanel.on('deactivate',newPanel.cleanUp)
    }
    displayPanel.activate(0)
    
}

function layout() {


    helpPanel = new Ext.Panel({
        layout: 'fit',
        collapsible: true,
        frame: true,
        title: 'Help',
        id: 'helpPanel',
        html: config[current_genome].helpText.helpPanel
    });

    buttons = []
    for (i in config) {
        buttons.push({
            id:i,
            name:'genome',
            boxLabel:config[i].genome_name,
            handler:select_genome
        })
    }
    genomeSelectPanel = new Ext.form.FormPanel({
    title: "Genomes",
    collapsible: true,
    labelAlign: 'top',
    frame:true,
    items:[
            new Ext.form.RadioGroup({
            id: 'genome',
//            layout:'anchor',
            columns:1,
//            fieldLabel: 'Genome',
            items: buttons
        })]

    })
    
    searchPanel = new Ext.form.FormPanel({
        title:"Search",
        frame: true,
        autoHeight: true,
        labelAlign: 'top',
				//layout:'fit',
				id: 'search_panel',
        waitMsgTarget: true,
        items: [
        new Ext.form.TextArea({
            id: "query",
            labelSeparator: '',
            fieldLabel: "Search" +
            '<img src="images/Information.png" class="tip" id="search_tip"/>',
            width: 200,
            height: 60
        }),
        new Ext.Button({
            text: "Search",
            style: 'margin-bottom:10px; margin-left: auto; margin-right: auto;',
            handler: function() {
                get_locations(Ext.getDom('query').value, search_mask, true)
            }
        })
        ]
    });


    geneListPanel = new Ext.Panel({
        region: 'center',
        margins: '0 0 0 0',
        //split: true,
        width: 200,
				rowHeight:1,
        layout: 'fit',
				flex:1,
        title: 'Gene List <img src="images/Information.png" class="tip" id="genes_tip"/>'
    });

    westPanel = new Ext.Panel({
        region: 'west',
        border: false,
        split: true,
        layout: 'ux.row',
        autoScroll: false,
        width: 200,
        margins: '0 0 0 0',
        items: [helpPanel,genomeSelectPanel,searchPanel,geneListPanel]
    });


    samplePanel = new Ext.Panel({
        region: 'center',
        margins: '0 0 0 0',
        layout: 'fit',
        split: true,
        tbar: new Ext.Toolbar({
            xtype: 'tbspacer',
            items: [{
                xtype: 'button',
                text: "Samples",
                icon: 'images/Information.png',
                cls: 'x-btn-text-icon',
                handler: function sampleHelp() {
                    if (Ext.getCmp('sampleHelpPopout'))
                    { 
                        if(Ext.getCmp('sampleHelpPopout').isVisible()) {
                            Ext.getCmp('sampleHelpPopout').destroy()
                            return;
                        }
                        else {
                            Ext.getCmp('sampleHelpPopout').destroy()
                        }
                    }
                    var win = new Ext.Window({
                        title: "Samples Help",
                        id: 'sampleHelpPopout',
                        overCls: 'myPopup',
                        closable: true,
                        
                        layout: 'anchor',
                        autoHeight: true,
                        width: 300,
                        stateful: false,
                        plain: true,
                        html: config[current_genome].helpText.sampleTip
                    });
                    win.show(this);
                }
            }, '-',{
                xtype: 'button',
                text: "Citation",
                icon: 'images/Information.png',
                cls: 'x-btn-text-icon',
                handler:  function sampleHelp() {
                    if (Ext.getCmp('citationPopout'))
                    { 
                        if(Ext.getCmp('citationPopout').isVisible()) {
                            Ext.getCmp('citationPopout').destroy()
                            return;
                        }
                        else {
                            Ext.getCmp('citationPopout').destroy()
                        }
                    }
                    var win = new Ext.Window({
                        title: "Citation",
                        id: 'citationPopout',
                        overCls: 'myPopup',
                        closable: true,
                        
                        layout: 'anchor',
                        autoHeight: true,
                        width: 300,
                        stateful: false,
                        plain: true,
                        html: config[current_genome].helpText.citation
                    });
                    win.show(this);
                }
            }, '-', {
                xtype: 'button',
                text: "Export Results",
                tooltip: 'Export data',
                icon: 'images/table_save.png',
                cls: 'x-btn-text-icon',
                handler: export_data
            }]
        })
    });

    samplePanel.add(sampleGrid);
    samplePanel.doLayout();

    displayPanel = new Ext.TabPanel({
        region: 'south',
        activeTab: 0,
        margins: '0 0 0 0',
        split: true,
        height: 400,
        id: 'tabPanel'
    })
    //addVisualPanels()

    




    centerPanel = new Ext.Panel({
        //autoWidth:true,
        margins: '0 0 0 0',
        region: 'center',
        split: true,
        autoScroll: true,
        layout: 'border',
        border: false,
        items: [displayPanel, samplePanel]
    });

    containerPanel = {
        header: false,
        title: 'Menu',
        region: 'center',

        layout: 'border',
        items: [
        westPanel,
        centerPanel
        ]
    }




    viewport = new Ext.Viewport({
        layout: 'fit',
        renderTo: Ext.getBody(),
        items: [
        containerPanel
        ]
    });

    Ext.QuickTips.init()

    search_mask = new Ext.LoadMask('search_panel', {
        msg: "Loading",
        id: 'search_mask'
    });


    Ext.get('search_tip').on('click',
    function(ee) {
        if (Ext.getCmp('searchTipPopout'))
        { 
            if(Ext.getCmp('searchTipPopout').isVisible()) {
                Ext.getCmp('searchTipPopout').destroy()
                return;
            }
            else {
                Ext.getCmp('searchTipPopout').destroy()
            }
        }

        var win = new Ext.Window({
            title: "Search Help",
            id: 'searchTipPopout',
            ctCls: 'myPopup',
            closable: true,
            layout: 'anchor',
            autoHeight: true,
            autoWidth: true,
            x: ee.xy[0],
            y: ee.xy[1],
            stateful: false,
            plain: true,
            html: config[current_genome].helpText.searchTip
        });
        win.show(this);
    });
    Ext.get('genes_tip').on('click',
    function(ee) {
        if (Ext.getCmp('geneListTipPopout'))
        { 
            if(Ext.getCmp('geneListTipPopout').isVisible()) {
                Ext.getCmp('geneListTipPopout').destroy()
                return;
            }
            else {
                Ext.getCmp('geneListTipPopout').destroy()
            }
        }

        var win = new Ext.Window({
            title: "Gene Lists Help",
            id: 'geneListTipPopout',
            ctCls: 'myPopup',
            closable: true,
            layout: 'anchor',
            autoHeight: true,
            autoWidth: true,
            x: ee.xy[0],
            y: ee.xy[1],
            stateful: false,
            plain: true,
            html: config[current_genome].helpText.geneListTip
        });
        win.show(this);
    });


    Ext.get('tutorial').on('click',
    function() {
        if (Ext.getCmp('tutorialPopout'))
        { 
            if(Ext.getCmp('tutorialPopout').isVisible()) {
                Ext.getCmp('tutorialPopout').destroy()
                return;
            }
            else {
                Ext.getCmp('tutorialPopout').destroy()
            }
        }
        var win = new Ext.Window({
            title: "Tutorial",
            id: 'tutorialPopout',
            ctCls: 'myPopup',
            closable: true,
            layout: 'anchor',
            width: 660,
            height: 540,
            stateful: false,
            plain: true,
            html: '<object width="640" height="505"><param name="movie" value="http://www.youtube.com/v/I4QoPGFk4x0&hl=en_US&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&hd=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/I4QoPGFk4x0&hl=en_US&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="505"></embed></object>'
        });
        win.show(this);

    });



    //Ext.getCmp('genome').setValue(Ext.getCmp(current_genome), true)

}

